<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>测试分页</title>
    <link rel="icon" href="../../module/favicon.ico" type="image/ico">
    <link href="../../module/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../module/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="../../module/css/style.min.css" rel="stylesheet">
    <script type="text/javascript" src="../../module/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../module/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../module/js/perfect-scrollbar.min.js"></script>
    <script type="text/javascript" src="../../module/js/main.min.js"></script>
    <script type="text/javascript" src="../../module/js/Chart.js"></script>
    <script type="text/javascript" src="../../js/base.js"></script>
    <script type="text/javascript" src="../../js/seller/seller-ajax.js"></script>
</head>
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">
            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="../../index.html"> <img alt="light year admin" src="/static/logo.png"
                                                 style="height: 64px; margin: 0"> </a>
            </div>
            <div class="lyear-layout-sidebar-scroll">
                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item active"><a onclick="home_page()" style="cursor: pointer">
                            <i class="mdi mdi-home"></i>后台首页</a></li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-shopping"></i>商品管理</a>
                            <ul class="nav nav-subnav">
                                <li><a onclick="product_list_page()" style="cursor: pointer">商品列表</a></li>
                                <li><a onclick="product_upload_page()" style="cursor: pointer">商品上传</a></li>
                                <li><a onclick="product_update_page()" style="cursor: pointer">商品修改</a></li>
                                <li><a style="cursor: pointer">商品详情</a></li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-library-books"></i>订单管理</a>
                            <ul class="nav nav-subnav">
                                <li><a onclick="order_list_page()" style="cursor: pointer">订单列表</a></li>
                                <li><a style="cursor: pointer">订单详情</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </aside>
        <header class="lyear-layout-header">
            <nav class="navbar navbar-default">
                <div class="topbar">
                    <div class="topbar-left">
                        <div class="lyear-aside-toggler">
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> 商家管理后台 </span>
                    </div>
                    <ul class="topbar-right">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
                                <span><span id="username-display">用户名</span><span class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="#"><i class="mdi mdi-account"></i>个人信息</a></li>
                                <li><a href="#"><i class="mdi mdi-lock-outline"></i>修改密码</a></li>
                                <li class="divider"></li>
                                <li><a onclick="log_out()" style="cursor: pointer"><i
                                        class="mdi mdi-logout-variant"></i>退出登录</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
    </div>
    <main class="lyear-layout-content">
        <nav style="width: 500px;margin: auto">
            <ul class="pagination" id="page_nav-ul" style="display:flex;justify-content:space-between">
                <li class="disabled">
                    <a>
                        <span><i class="mdi mdi-chevron-left"></i></span>
                    </a>
                </li>
                <li class="active"><a>1</a></li>
                <li class="disabled"><a>...</a></li>
                <li><a onclick="get_page(2)" style="cursor: pointer">2</a></li>
                <li class="disabled">
                    <a>
                        <span><i class="mdi mdi-chevron-right"></i></span>
                    </a>
                </li>
            </ul>
        </nav>
    </main>
    <script>
        $(document).ready(function () {
            get_page(1);
        })

        function load_page_nav(page_sum, page) {
            var pageNavString = "";
            //在第一页
            if (page === 1) {
                pageNavString += "<li class=\"disabled\">" +
                    "  <a>" +
                    "     <span><i class=\"mdi mdi-chevron-left\"></i></span>" +
                    "  </a>" +
                    "</li>";
                pageNavString += "<li class=\"active\"><a>1</a></li>";
            } else {
                pageNavString += "<li class=\"disabled\">\n" +
                    "  <a onclick=\"get_page(" + (page - 1) + ")\" style=\"cursor: pointer\">\n" +
                    "     <span><i class=\"mdi mdi-chevron-left\"></i></span>\n" +
                    "  </a>\n" +
                    "</li>";
                pageNavString += "<li><a onclick=\"get_page(" + (1) + ")\" style=\"cursor: pointer\">1</a></li>";
            }
            for (var i = 2; i < page_sum; i++) {
                if ((page - 3) === i) {
                    pageNavString += "<li class=\"disabled\"><a>...</a></li>";
                }
                if ((page - 3 < i) && (i < page + 3)) {
                    if (page === i) {
                        pageNavString += "<li class=\"active\"><a onclick=\"get_page(" + i + ")\" style=\"cursor: pointer\">" + i + "</a></li>";
                    } else {
                        pageNavString += "<li><a onclick=\"get_page(" + i + ")\" style=\"cursor: pointer\">" + i + "</a></li>";
                    }
                }
                if ((page + 3) === i) {
                    pageNavString += "<li class=\"disabled\"><a>...</a></li>";
                }
            }
            if (page_sum >= 2) {
                //在最后一页
                if (page_sum === page) {
                    pageNavString += "<li class=\"active\"><a>" + page_sum + "</a></li>";
                    pageNavString += "<li class=\"disabled\">\n" +
                        "  <a>" +
                        "     <span><i class=\"mdi mdi-chevron-right\"></i></span>\n" +
                        "  </a>\n" +
                        "</li>";
                    pageNavString += "</div>";
                } else {  //不在最后一页
                    pageNavString += "<li><a onclick=\"get_page(" + page_sum + ")\" style=\"cursor: pointer\">" + page_sum + "</a></li>";
                    pageNavString += "<li>" +
                        "  <a onclick=\'get_page(" + (page + 1) + ")\' style=\'cursor: pointer\'>\n" +
                        "     <span><i class=\"mdi mdi-chevron-right\"></i></span>\n" +
                        "  </a>" +
                        "</li>";
                }
            }
            document.getElementById("page_nav-ul").innerHTML = pageNavString;
        }

        function get_page(page) {
            //分页前默认请求
            var page_sum = 100;
            //进行分页
            load_page_nav(page_sum, page);
            //添加新的分页后操作逻辑
        }
    </script>
</div>
</body>

</html>